<template>
  <!--输入框-->
  <div class="input">
    <el-input v-model="input"
              placeholder="请输入培训班名称"
              style="width:200px"
              clearable
              size="large"
    />
    <el-button type="info" size="large">搜索</el-button>
    <el-button type="info" size="large">刷新</el-button>
    <el-button type="info" size="large" @click="toCreateTClass = true,clearForm(),requestAllNclass()">导入学生</el-button>
      <el-button type="info" size="large" @click="toAddStudent = true ">添加学生
    </el-button>
  </div>
  <!--教学班列表-->
  <div class="exam-list">
    <el-table
        :data="tclassDetail"
        border
        style="width: 100%;">
      <el-table-column
          label="序号"
          width="60"
          align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
          prop="name"
          label="名字"
          width="120"
          align="center">
        <template #default="scope">
          <el-tooltip content="点击查看学生详情" placement="top">
                            <span class="col2-cell-style"
                                  @click="viewUser">{{ scope.row.name }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          prop="userid"
          label="用户号"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          prop="startTime"
          label="创建时间"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          prop="class"
          label="班级"
          width="200"
          align="center">
      </el-table-column>

      <el-table-column
          prop="teacher"
          label="培训师"
          align="center">
      </el-table-column>
      <el-table-column
          prop="userstate"
          label="用户身份"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="100"
          align="center">
        <template #default>
          <el-tag type="success" disable-transitions>正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="360">
        <template #default="scope">
          <el-button
              size="small"
              type="primary"
              @click="changeTclass((currentPage - 1) * pageSize + scope.$index)">修改信息
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="deleteTclass((currentPage - 1) * pageSize + scope.$index)">删除用户
          </el-button>
          <el-button
              size="small"
              type="info"
              @click="updateUserPassword((currentPage - 1) * pageSize + scope.$index)">修改用户密码
          </el-button>
          <!--<el-button-->
          <!--size="small"-->
          <!--type="primary"-->
          <!--@click="assignHomework((currentPage - 1) * pageSize + scope.$index)">布置作业-->
          <!--</el-button>-->
          <!--<el-button-->
          <!--size="small"-->
          <!--type="primary"-->
          <!--@click="downloadExcel((currentPage - 1) * pageSize + scope.$index)">下载成绩-->
          <!--</el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--分页-->
  <Pagination :currentPage="1" :pageSize="20" :total="tclassDetail.length"
              :handleSizeChange="5" :handleCurrentChange="5"></Pagination>

  <!--组建教学班 对话框-->
  <el-dialog title="组建教学班" width="90%" :model-value="toCreateTClass" top="2vh"
             @close="toCreateTClass = false, clearForm()">
    <el-form ref="tclassForm1" :model="tclassForm" status-icon>
      <el-form-item label="教学班名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="tclassForm.name" autocomplete="off" placeholder="请输入班级名称"
                  style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="请选择自然班级" prop="nclass" class="transfeTitle">
      </el-form-item>
      <div class="transfeLayout">
        <el-transfer
            filterable
            filter-placeholder="请输入自然班名称"
            v-model="tclassForm.nclass"
            :data="nclassData"
            :titles="transferTitles"
            :button-texts="transferButtonText">
        </el-transfer>
      </div>

      <el-form-item label="结课时间" :label-width="formLabelWidth" prop="endTime">
        <el-date-picker
            v-model="tclassForm.endTime"
            type="date"
            format="YYYY 年 MM 月 DD 日"
            value-format="YYYYMMDD"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="创建人" :label-width="formLabelWidth" prop="teacher">
        <el-input v-model="tclassForm.teacher" autocomplete="off" :disabled="true" style="width: 80%;"></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="toCreateTClass = false, clearForm()">取 消</el-button>
      <el-button type="primary" @click="createTClass()">保 存</el-button>
    </div>
  </el-dialog>
  <!--修改密码对话框-->
  <el-dialog v-model="updatePasswordVisible" title="修改密码">
    <el-form :model="pwdForm" ref="$pwdForm" :rules="rules" label-width="100px">
      <el-form-item label="旧密码" prop="oldPwd">
        <el-input v-model="pwdForm.oldPwd" type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input v-model="pwdForm.newPwd" type="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="surePwd">
        <!--<&#45;&#45;! **`@input` 是一个事件监听器，用于监听 `<el-input>` 组件的输入事
        件。当用户进行输入时会触发checkPasswordsMatch方法，进行新密码和确认密码的校验**&ndash;&gt;-->
        <el-input v-model="pwdForm.surePwd" type="password" autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer newfooter">
                <el-button :loading="loading" type="primary" @click="confirmChangePwd">确 定</el-button>
                <el-button :loading="loading" @click="handleClosedialog">取 消</el-button>
            </span>
  </el-dialog>
  <!--添加用户对话框 -->
  <el-dialog title="添加学生" v-model="toAddStudent" top="1vh" width="38%">
    <div slot="title" class="header-title">
      <span>添加学生：{{ classTitle }}</span>
    </div>
    <el-form ref="$studentForm" :model="studentForm" status-icon :rules="studentRules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="studentForm.name" autocomplete="off" clearable ></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="phone">
        <el-input v-model="studentForm.phone" autocomplete="off" clearable ></el-input>
      </el-form-item>
      <el-form-item label="自然班级名称" prop="nClass">
        <el-input v-model="studentForm.nClass" autocomplete="off" clearable ></el-input>
      </el-form-item>
      <el-form-item label="入学年份" prop="year">
        <el-input v-model="studentForm.year" autocomplete="off" clearable ></el-input>
      </el-form-item>
      <el-form-item label="学号/考生号" prop="id">
        <el-col :span="10">
          <el-input v-model="studentForm.id" autocomplete="off" clearable
                    placeholder="请输入学号/考生号"></el-input>
        </el-col>
        <el-col :span="4" style="margin-left: 8px">
          <el-button type="primary" @click="getStudentById"><i class="el-icon-search"></i> 查询</el-button>
        </el-col>
        <el-col :span="4">
          <el-tooltip content="重置表单内容" placement="top">
            <el-button type="primary" @click="resetAdd"><i class="el-icon-refresh"></i> 重置</el-button>
          </el-tooltip>

        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="toAddStudent=false,resetAdd()">取 消</el-button>
      <el-button type="primary"  @click="addStudent(curClassIndex)">添 加</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
import {reactive, ref} from 'vue'

export default {
  components: {
    Pagination
  },
  setup() {
    let studentForm = reactive({ // 学生表单
      id: '',
      name: '',
      phone: '',
      nClass: '',
      year: ''
    })
    let pwdForm = reactive({
      oldPwd: "",
      newPwd: "",
      surePwd: "",
    })
    let toAddStudent = ref(false)
    // 效验规则


    let studentRules=reactive( {
      id: [
        {validator: checkSid, trigger: 'blur'}
      ]
    })

    let rules = reactive({
      oldPwd: [{
        required: true,
        message: "请输入旧密码",
        trigger: "blur"
      }],
      newPwd: [{
        required: true,
        message: "请输入新密码",
        validator: newPassFn,
        trigger: "blur"
      }],
      surePwd: [{
        required: true,
        message: "请再次输入新密码",
        validator: validateSurePwd,
        trigger: "blur"
      },
      ],
    })
    let input = ref('')
    let updatePasswordVisible = ref(false)
    let stuCurPage = ref(1)  //学生
    let tclassDetail = reactive([
      {
        endTime: "2023-12-31 00:00:00",
        endTimestamp: 1703952000000,
        id: 193,
        name: "张三",
        startTime: "2023-09-11 10:05:52",
        class: "一班",
        startTimestamp: 1694397952966,
        teacher: "刘新",
        userstate: '普通用户',
        userid: "156487941216",
      },
      {
        endTime: "2023-12-31 00:00:00",
        endTimestamp: 1703952000000,
        id: 192,
        name: "李四",
        startTime: "2023-09-11 09:42:22",
        class: "一班",
        startTimestamp: 1694396542233,
        teacher: "刘新",
        userstate: '普通用户',
        userid: "156487941216",
      },
      {
        endTime: "2023-06-30 00:00:00",
        endTimestamp: 1688054400000,
        id: 148,
        name: "王五",
        startTime: "2023-02-16 17:03:06",
        class: "一班",
        startTimestamp: 1676538186712,
        teacher: "刘新",
        userstate: '普通用户',
        userid: "156487941216",
      },
      {
        endTime: "2023-06-30 00:00:00",
        endTimestamp: 1688054400000,
        id: 148,
        name: "赵六",
        startTime: "2023-02-16 17:03:06",
        class: "一班",
        startTimestamp: 1676538186712,
        teacher: "刘新",
        userstate: '普通用户',
        userid: "156487941216",
      },
      {
        endTime: "2023-06-30 00:00:00",
        endTimestamp: 1688054400000,
        id: 148,
        name: "哈哈",
        startTime: "2023-02-16 17:03:06",
        class: "一班",
        startTimestamp: 1676538186712,
        teacher: "刘新",
        userstate: '普通用户',
        userid: "156487941216",
      },
      {
        endTime: "2023-06-30 00:00:00",
        endTimestamp: 1688054400000,
        id: 148,
        name: "王天一",
        startTime: "2023-02-16 17:03:06",
        class: "一班",
        startTimestamp: 1676538186712,
        teacher: "无",
        userstate: '培训师',
        userid: "156487941216",
      }
    ])
    let toCreateTClass = ref(false)
    let toViewNClassByTClass = ref(false)
    let nclassData = ref([])
    let transferTitles = ref(['未选择', '已选择'])
    let transferButtonText = ref(['删除', '添加'])
    let formLabelWidth = ref('120px')
    let tclassForm = reactive({
      name: '数据结构',
      nclass: [201900008, 201900026],
      endTime: '2020-01-16 14:15:12',
      // teacher: localStorage.getItem("teacherName"),
      teacher: 'lll'
    })




    //清除表格
    function clearForm() {
      tclassForm = {
        name: '',
        nclass: [],
        endTime: '',
        teacher: localStorage.getItem("teacherName"),
      }
    }
    function getStudentById(){

    }
    function addStudent(student){

    }
    function resetAdd(){
      let studentFormInit = { // 学生表单
        id: '',
        name: '',
        phone: '',
        nClass: '',
        year: ''
      }
      Object.assign(studentForm, studentFormInit)
    }
    function requestAllNclass() {
      return ''
    }

    function viewNClassByTClass(id) {

    }

    function changeTclass(id) {

    }
    function checkSid  (rule, value, callback) {
      if (value == '') {
        return callback(new Error('学号/考生号不能为空'));
      } else {
        if (!this.isNumber(value + '')) {
          callback(new Error('请输入数字值'));
        } else {
          if ((value + '').trim().length > 20) {
            callback(new Error('长度不能超过 20 个字符'));
          } else {
            callback();
          }
        }
      }
    };
    function deleteTclass(id) {

    }

    function updateUserPassword(id) {
      updatePasswordVisible.value = true
    }

    function newPassFn(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        callback()
      }
    }

    function validateSurePwd(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== pwdForm.newPwd) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    }

    function viewUser() {
      this.$router.push({path: '/test/chart'});
    }


    return {addStudent,getStudentById,resetAdd,checkSid,studentRules,studentForm,
      toAddStudent,
      viewUser,
      newPassFn,
      pwdForm,
      rules,
      validateSurePwd,
      updatePasswordVisible,
      input,
      tclassDetail,
      toCreateTClass,
      toViewNClassByTClass,
      tclassForm,
      clearForm,
      requestAllNclass,
      nclassData,
      transferTitles,
      transferButtonText,
      formLabelWidth,
      viewNClassByTClass,
      changeTclass,
      deleteTclass,
      stuCurPage,
      updateUserPassword
    }
  }
}
</script>

<style scoped>
.input {
  padding-top: 5px;
  padding-right: 800px;
}

.el-button {
  padding-left: 25px;
}

.transfeLayout {
  margin-left: 120px;
  margin-bottom: 25px;

}

.transfeLayout >>> .el-transfer-panel {
  width: 300px;
}

.transfeTitle {
  width: 120px;
  height: 0px;
  padding-left: 12px;
  margin-bottom: 0px;
}

.exam-list {
  width: 100%;
}

.exam-list .col2-cell-style {
  color: #409EFF;
  cursor: pointer;
}
</style>
